<template>
  <el-carousel :interval="4000" type="card" height="350px">
    <el-carousel-item v-for="item in state.tableData" :key="item">
      <el-image :src="item.url" :preview-src-list="[item.url]" style="width: 100%"></el-image>
    </el-carousel-item>
  </el-carousel>

  <div style="margin: 10px 0">
    <div style="margin: 20px 0; font-size: 20px; color: orangered; border-bottom: 1px solid orangered; padding-bottom: 10px">商品列表</div>
    <el-row :gutter="10">
      <el-col :span="6" v-for="item in state.goods" :key="item.id" style="margin-bottom: 10px">
        <div style="background-color: white; padding: 10px; cursor: pointer" @click="router.push('/front/detail?id=' + item.id)">
          <img :src="item.img" alt="" style="width: 100%; height: 250px; overflow: hidden; border-radius: 10px">
          <div style="color: #666; margin: 10px 0" class="line1">{{ item.name }}</div>
          <div style="margin: 10px 0; color: red; font-weight: bold; font-size: 14px">￥{{ item.price }} / {{ item.unit }}</div>
        </div>
      </el-col>
    </el-row>
    <div style="padding: 10px 0; background-color: white">
      <el-pagination
          :background = "true"
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 40]"
          large
          :disabled="false"
          layout="total, sizes, prev, pager, next, jumper"
          :total=total
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script setup>
import {onMounted, reactive, ref} from "vue";
import request from "../../request.js";
import router from "../../router/index.js";

const state = reactive({
  tableData:[],
  goods:[]
})

const currentPage = ref(1)
const pageSize = ref(5)
const total = ref(0)
onMounted(() => {
  window.onbeforeunload = function (e) {
    let storage = window.localStorage;
    storage.clear();
  };
})
const load = () => {
  request.get("/lun").then(res => {
    state.tableData = res.data
    //console.log(state.tableData)
  })
  request.get("/goods/page", {
    params:{
      currentPage: currentPage.value,
      pageSize: pageSize.value,
      name: name.value,
    }
  }).then(res => {
    if(res.code==='200'){
      state.goods = res.data.list
      total.value = res.data.total
      console.log(total.value)
    }
  })
}
load()

const handleSizeChange = (val) => {
  pageSize.value = val
  load()
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  load()
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
